<template>
    <div>
        <div class="table-wrap">
            <el-row class="pt20">
                <pers-button icon="" size="mini" @click="add()" perms="kanke:exercises:task:add" type="primary"
                    label="创建打卡任务"></pers-button>
                <el-button icon="" size="mini" @click="refresh()" type="primary">刷新</el-button>
            </el-row>
            <el-table :data="tableData" :loading="loading" size="mini" style="width: 100%;margin-bottom: 20px;"
                row-key="id" border stripe default-expand-all>
                <el-table-column prop="task_name" label="任务名称" header-align="center" align="center">
                    <template slot-scope="scope">
                        <div style="display: flex;">
                            <img :src="scope.row.cover_url" alt="暂无图片"
                                style="vertical-align: middle;width: 80px; height: 66px; margin-right: 10px;">
                            <div style="">
                                <p style="margin-top: 0;text-align: left;font-weight: bold;font-size: 16px;">{{
                                    scope.row.task_name }}</p>
                                <p style="margin-bottom: 0;text-align: left;font-size: 14px;">备注:{{ scope.row.remarks }}
                                </p>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="update_time" label="最后更新时间" header-align="center"
                    align="center"></el-table-column>
                <el-table-column prop="state" label="操作" header-align="center" align="center">
                    <template slot-scope="scope">

                        <el-link type="primary" @click="edit(scope.row.id)">
                            编辑
                        </el-link>

                        <PersButton type="text" perms="kanke:exercises:task:delete" label="删除" style="margin-left: 15px;"
                                    @click="del(scope.row.id)">
                        </PersButton>

                        <!--                        <el-button type="primary" style="padding-right: 10px;" @click="edit(scope.row.id)" label="编辑" perms="kanke:exercises:task:edit">编辑</el-button>-->
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pageInfo.pageNumber" :page-sizes="[1, 10, 50, 100, 200]"
                    :page-size="pageInfo.pageSize" background layout="total, sizes, prev, pager, next, jumper"
                    :total="pageInfo.total">
                </el-pagination>
            </div>
        </div>
    </div>

</template>
<script>
import { list,del } from "@/api/kanke/exercises/tasktemplate";
import PersButton from '../../../../components/PersButton.vue';
let _that;
export default {
    name: 'TaskTemplate',
    components: {
        PersButton
    },
    data() {
        return {
            loading: false,
            tableData: [],
            form: {
            },
            pageInfo: {
                pageSize: 10,
                pageNumber: 1,
                total: 0
            },
            showClassDetail: false,
            showAddClass: false,
            classId: 0       //子组件
        }
    },
    created() {
        _that = this;
        _that.init();
    },
    watch: {
        $route(to, from) {
            //window.location.reload();
            this.init();
        }
    },
    methods: {
        init(data = {}) {
            _that.loading = true;
            let params = Object.assign(this.pageInfo, data);
            console.log('init params', params);
            list(params).then((res) => {
                console.log(res);
                _that.tableData = res.data.list;
                _that.pageInfo.total = res.data.total;
                _that.loading = false;
            })
        },
        add() {
            this.$router.push({ path: 'createTaskTemplate', query: { id: '' } });
        },
        edit(id) {
            const randNum = new Date().getTime();
            this.$router.push({ path: 'createTaskTemplate', query: { id: id, randNum: randNum } });
        },
        del(id){

            this.$confirm('请确定是否将该模板删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                del({'id':id}).then((res) => {
                    console.log(res);
                    if (res.code == 200) {
                        this.$message({ type: 'success', message: '删除成功!' });
                        this.init();
                    } else {
                        this.$message({ type: 'warning', message: res.msg });
                    }
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });


        },
        handleSizeChange: function (e) {
            _that.pageInfo.pageSize = e;
            _that.init();
        },
        handleCurrentChange: function (e) {
            console.log(e);
            _that.pageInfo.pageNumber = e;
            _that.init();
        },
        refresh() {
            location.reload();
        }
    }
}


</script>

<style lang="scss" scoped>
.demo-form-inline {
    ::v-deep .el-select .el-input {
        width: 200px;
    }
}

.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
}
</style>